<template>
  <div class="manageOfferHead">
    <ManageHead />
  </div>

  <div class="manageStateContainer">
    <!-- 管理页导航栏 -->
    <ManageMenu />

    <!-- 页面主体部分 -->
    <div class="stateDataModule">
      <div class="searchStateModule">
        <el-input
          v-model="searchState"
          style="width: 20%; margin-left: 5%; margin-right: 3px"
          placeholder="请输入要查询的信息"
          clearable
        />
        <el-button type="primary" :icon="Search" @click="stateTable"
          >全局搜索</el-button
        >
      </div>

      <!-- 员工表格管理 -->
      <div class="stateTableModule">
        <el-table
          :data="tableData"
          :header-cell-style="{
            color: '#000',
            backgroundColor: '#d4d4d4',
            textAlign: 'center',
          }"
          :row-style="{ height: '90px' }"
          :cell-style="{
            textAlign: 'center',
          }"
        >
          <el-table-column property="offerID" label="商品ID" />
          <el-table-column label="商品图片">
            <template #default="data">
              <img
                :src="data.row.offerImage"
                alt="商品展示图片"
                style="height: 60px; width: auto"
              />
            </template>
          </el-table-column>
          <el-table-column property="offerName" label="商品名称" />
          <el-table-column property="offerStyle" label="商品种类" />
          <el-table-column property="offerLocal" label="商品地址" />
          <el-table-column property="finalPrice" label="最终价格" />
          <el-table-column property="offerState" label="商品状态" />
          <el-table-column property="offerUser" label="售出人员" />
          <el-table-column property="cartUser" label="购买人员" />
          <el-table-column property="userLocal" label="收货地点" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button
                type="warning"
                :icon="Edit"
                @click="editState(scope.row)"
                circle
              />
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页栏部分 -->
        <div class="pagiNation">
          <el-pagination
            :page-size="5"
            :pager-count="5"
            :current-page="pageNum.value"
            layout="prev, pager, next"
            :total="totalNum"
            @current-change="currentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ManageMenu from "@/components/ManageMenu.vue";
import ManageHead from '@/components/ManageHead.vue';
import { Search, Edit } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { onMounted, ref } from "vue";
import request from "@/request/axios";

export default {
  components: { ManageMenu, ManageHead },
  setup() {
    let searchState = ref("");
    let tableData = ref();
    let pageNum = ref(1);
    let totalNum = ref(0);

    const stateTable = () => {
      request
        .post("/manage/queryState", {
          searchStr: searchState.value,
          pageNum: pageNum.value,
          pageSize: 8,
        })
        .then((res) => {
          if (res.code === "200") {
            tableData.value = res.data.data;
            totalNum.value = res.data.total;
          } else {
            tableData.value = [];
            ElMessage.warning(res.msg);
          }
        });
    };

    onMounted(stateTable);

    const editState = (row) => {
      ElMessage.warning("功能未完善");
    };

    const currentChange = (current) => {
      pageNum.value = current;
      stateTable();
    };

    return {
      Search,
      Edit,
      pageNum,
      totalNum,
      tableData,
      searchState,
      editState,
      stateTable,
      currentChange,
    };
  },
};
</script>

<style>
body {
  display: flex;
  width: 100vw;
  height: 100vh;
  margin: 0;
}

.manageStateContainer {
  display: flex;
  flex-direction: row;
  width: 100vw;
  height: 90vh;
}

.stateDataModule {
  display: flex;
  flex-direction: column;
  width: 85%;
  height: 100%;
}

.searchStateModule {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 2px solid #000;
  width: 100%;
  height: 10%;
}

.stateTableModule {
  display: flex;
  flex-direction: column;
  margin-top: 2%;
  width: 100%;
  height: 98%;
}

.pagiNation {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 5%;
  width: 100%;
  color: aqua;
}
</style>